<template>
  <div class="message">
    <div style="margin-top: 20px;">
      <!-- <el-select class="select" v-model="selectDate" @change="initFrame()">
        <el-option
          v-for="item in options_selectDate"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>-->
      <el-form class="display">
        <el-form-item label="垃圾点名称：" label-width="120px">
          <el-input v-model="lajiname" placeholder="请输入餐厨垃圾点名称"></el-input>
        </el-form-item>
        <el-form-item label="来源类型：" label-width="100px" style="margin-right:15px">
          <!-- <el-cascader v-model="form.groupingValue" :options="groupingList" style="line-height: 26px;"></el-cascader> -->
          <el-select v-model="carWorktype" placeholder="请选择来源类型">
            <el-option
              v-for="item in selectWorktype"
              :key="item.index"
              :label="item.TYPE"
              :value="item.index"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="车辆类型" label-width="70px">
          <el-input placeholder="请输入车辆类型" style="font-size:12px;"> </el-input>
        </el-form-item>
        <el-form-item label="运输来源单位类型" label-width="130px">
          <el-input placeholder="请输入运输来源单位类型"> </el-input>
        </el-form-item>-->
        <!-- <el-form-item label="类型" label-width="50px" style="margin-right:10px">
          <el-input
            v-model="lajitype"
            placeholder="请输入类型"
            style="font-size:12px;"
            @input="typemohu()"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="街道" label-width="50px">
          <el-input placeholder="请输入街道"> </el-input>
        </el-form-item>-->
        <!-- <p><b>车辆数量：</b><span>323</span>辆</p> -->
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="mohu">搜索</el-button>
          <el-button
            size="mini"
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="addlistdatadiglog()"
          >新增</el-button>
          <!-- <el-button size="mini" type="primary" >导出</el-button> -->
          <!-- <el-button type="primary" @click="exportToExcel()" style="background: #409eff; border: 1px solid #409eff"
              >导出列表</el-button
          >-->
        </el-form-item>
      </el-form>
      <!-- <el-select class="select" v-model="selectDistrict" placeholder="请选择小区" @change="initFrame()">
        <el-option
          v-for="item in options_selectDistrict"
          :key="item.CLIENT_NO"
          :label="item.CLIENT_NAME"
          :value="item.CLIENT_NO"
        ></el-option>
      </el-select>-->
    </div>
    <div>
      <!-- <el-table
            :data="carList"
          style="width:100%">
            <el-table-column prop="VID" label="车辆编号" width="80"></el-table-column>
      <el-table-column prop="LICENSE_PLATE" label="车辆名称" width="110"></el-table-column>-->
      <!-- <el-table-column
                prop="RFID"
                label="RFID号"
                width="130">
      </el-table-column>-->
      <!-- <el-table-column prop="vehiclenumber" label="车辆编号" sortable width="110"></el-table-column>
            <el-table-column prop="grouping" label="分组" sortable width="150"></el-table-column>
            <el-table-column prop="vehiclename" label="车辆名称" width="75"></el-table-column>
            <el-table-column prop="communicationnumber" label="通讯卡号" width="75"></el-table-column>
            <el-table-column prop="vehicletype" label="车辆类型  " width="120"></el-table-column>
      <el-table-column prop="source" label="请输入运输来源单位类型" width="100"></el-table-column>-->
      <!-- <el-table-column prop="CAR_TYPE" label="车辆类型"></el-table-column>
            <el-table-column prop="ORIENTATION_TIME" label="最终定位时间" sortable width="170"></el-table-column>
            <el-table-column prop="POSITION" label="位置" width="220"></el-table-column>
            <el-table-column prop="Direction" label="航向"></el-table-column>
            <el-table-column prop="SPEED" label="航速"></el-table-column>
            <el-table-column prop="LONGITUDE" label="经度" width="100"></el-table-column>
      <el-table-column prop="LATITUDE" label="纬度" width="100"></el-table-column>-->
      <!-- </el-table> -->
      <el-table
        :data="carList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%"
      >
        <!-- <el-table-column prop="ID" label="ID" width="180"></el-table-column> -->
        <!--   <el-table-column
        prop="LICENSE_PLATE"
        label="车辆名称"
        width="180">
        </el-table-column>-->
        <el-table-column prop="NAME" label="垃圾点名称"></el-table-column>
        <el-table-column prop="CLIENT_NAME" label="所属区"></el-table-column>
        <el-table-column prop="PARENT_NO" label="所属小区"></el-table-column>
        <el-table-column prop="TYPE" label="点位类型"></el-table-column>
        <el-table-column prop="LONGITUDE" label="经度"></el-table-column>
        <el-table-column prop="LATITUDE" label="纬度"></el-table-column>
        <!-- <el-table-column
        prop="source"
        label="运输来源单位类型">
        </el-table-column>-->
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              style="color:red"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="carList.length"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
      <!-- 新增 -->
      <el-dialog v-dialogDrag title="新增" :visible.sync="adddialog" width="50%" style="height:100%">
        <el-form ref="addform" :model="addform" label-width="80px" class="flex">
          <el-form-item
            label="垃圾点名称："
            :label-width="labelwidth"
            class="wid50"
            style="color: #45D2F7"
          >
            <el-input v-model="addform.NAME" placeholder="请输入垃圾点名称" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="所属区：" :label-width="labelwidth" class="wid50">
            <el-select v-model="addform.CLIENT_NO" placeholder="请选择" @change="changevalue">
              <el-option
                v-for="item in clientoption"
                :key="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NO"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="name" placeholder="请输入类型" class="handle-input mr10"></el-input> -->
          </el-form-item>
          <el-form-item label="所属小区：" :label-width="labelwidth" class="wid50">
            <el-select v-model="addform.PLOT_NO" placeholder="请选择">
              <el-option
                v-for="items in vallageoption"
                :key="items.PLOT_NO"
                :label="items.PLOT_NAME"
                :value="items.PLOT_NO"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="name" placeholder="请输入所属小区" class="handle-input m r10"></el-input> -->
          </el-form-item>
          <el-form-item label="点位类型：" :label-width="labelwidth" class="wid50">
            <el-select v-model="addform.TYPE" placeholder="请选择">
              <el-option
                v-for="item in worktype"
                :key="item.TYPE_ID"
                :label="item.TYPE"
                :value="item.TYPE_ID"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="addform.TYPE" placeholder="请输入点位类型" class="handle-input mr10"></el-input> -->
          </el-form-item>
          <el-form-item label="经度：" :label-width="labelwidth" class="wid50">
            <el-input v-model="addform.LONGITUDE" placeholder="请输入经度" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="纬度：" :label-width="labelwidth" class="wid50">
            <el-input v-model="addform.LATITUDE" placeholder="请输入纬度" class="handle-input mr10"></el-input>
          </el-form-item>
          <!-- <el-form-item label="运输来源单位类型：" :label-width="labelwidth" class="wid40">
              <el-input v-model="name" placeholder="请输入运输来源单位类型" class="handle-input mr10"></el-input>
          </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="adddialog = false">取 消</el-button>
          <el-button type="primary" @click="addlistdata(addform)">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog v-dialogDrag title="编辑" :visible.sync="editdialog" width="50%" style="height:100%">
        <el-form ref="editform" :model="editform" label-width="80px" class="flex">
          <el-form-item
            label="餐厨垃圾点名称："
            :label-width="labelwidth"
            class="wid50"
            style="color: #45D2F7"
          >
            <el-input v-model="editform.NAME" placeholder="请输入餐厨垃圾点名称" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="类型：" :label-width="labelwidth" class="wid50">
            <el-select v-model="editform.TYPE" placeholder="请选择">
              <el-option
                v-for="item in worktype"
                :key="item.TYPE_ID"
                :label="item.TYPE"
                :value="item.TYPE_ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经度：" :label-width="labelwidth" class="wid50">
            <el-input v-model="editform.LONGITUDE" placeholder="请输入经度" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="纬度：" :label-width="labelwidth" class="wid50">
            <el-input v-model="editform.LATITUDE" placeholder="请输入纬度" class="handle-input mr10"></el-input>
          </el-form-item>
          <el-form-item label="所属区：" :label-width="labelwidth" class="wid50">
            <el-select v-model="editform.CLIENT_NO" placeholder="请选择" @input="changevalue">
              <el-option
                v-for="item in clientoption"
                :key="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NO"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属小区：" :label-width="labelwidth" class="wid50">
            <el-select v-model="editform.PLOT_NAME" placeholder="请选择">
              <el-option
                v-for="item in vallageoption"
                :key="item.PLOT_NO"
                :label="item.PLOT_NAME"
                :value="item.PLOT_NO"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="运输来源单位类型：" :label-width="labelwidth" class="wid50">
              <el-input v-model="editform.source" placeholder="请输入运输来源单位类型" class="handle-input mr10"></el-input>
          </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editdialog = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import '@/assets/css/common.css'
export default {
  data () {
    return {
      adddialog: false,
      editdialog: false,
      lajiname: '',
      lajitype: '',
      currentPage: 1,
      labelwidth: '120px',
      pageSize: 10,
      userList: [],
      editform: {},
      addform: {},
      clientoption: [],
      vallageoption: [],
      carList: [],
      options_selectDate: [{
        value: '上月',
        label: '上月'
      }, {
        value: '本月',
        label: '本月'
      }],
      options_selectDistrict: [],
      selectDate: '上月',
      selectDistrict: '',
      worktype: [{
        TYPE: '小区',
        TYPE_ID: 1
      }, {
        TYPE: '沿街商铺',
        TYPE_ID: 2
      }, {
        TYPE: '大中型餐饮单位',
        TYPE_ID: 3
      }],
      carWorktype: '',
      selectWorktype: [{
        TYPE: '全部',
        index: ''
      }, {
        TYPE: '小区',
        index: '小区'
      }, {
        TYPE: '沿街商铺',
        index: '沿街商铺'
      }, {
        TYPE: '大中型餐饮单位',
        index: '大中型餐饮单位'
      }],
      options_selectDate: [{
        value: '上月',
        label: '上月'
      }, {
        value: '本月',
        label: '本月'
      }]
    }
  },
  created () {
    // this.initLoad()
    // this.loadSelectionDistrict()
    this.getclient()
    // this.getvallage()
    this.getplacelist()
  },
  methods: {
    // 获取区域列表
    getclient () {
      this.$axios({
        url: this.$url + 'GetClientListApi',
        method: 'get'
      }).then(res => {
        this.clientoption = Object.assign([], res.data)
        console.log(res.data)
      })
    },
    // 获取小区列表
    // getvallage () {
    //   this.$axios({
    //     // {
    //     url:'http://192.168.1.113:63067/Cityscapeapi/DataListCompany/GetVallageApi' ,
    //     method: 'get'
    //   }).then(res => {
    //     console.log(res.data)
    //     this.vallageoption = Object.assign([], res.data)
    //   })
    // },
    async changevalue (e) {
      console.log(e)
      const { data } = await this.$axios.get(this.$url + '/GetVallageApi?id=' + e);
      console.log(data)
      this.vallageoption = data.filter(item => {
        return item
      })

    },
    // 垃圾点列表
    getplacelist () {
      this.$axios({
        // this.$url + 
        url: this.$url + 'GetPlacePointApi',
        method: 'get'
      }).then(res => {
        console.log(res.data)
        this.originalData = Object.assign([], res.data)
        this.originalData = res.data.filter(item => {
          // console.log(item)
          if (item.TYPE == '1') {
            item.TYPE = '小区'
          } else if (item.TYPE == '2') {
            item.TYPE = '沿街商铺'
          } else if (item.TYPE == '3') {
            item.TYPE = '大中型餐饮单位'
          }
          return item
        })
        this.mohu()
      })
    },
    // 新增弹框
    addlistdatadiglog () {
      this.adddialog = true
    },
    // 新增保存
    addlistdata (addform) {
      console.log({
        NAME: addform.NAME,
        PARENT_NO: addform.CLIENT_NO,
        CLIENT_NO: addform.PLOT_NO,
        TYPE: addform.TYPE,
        LONGITUDE: addform.LONGITUDE,
        LATITUDE: addform.LATITUDE
      })
      this.$axios({
        url: this.$url + 'AddPlacePointApi',
        method: 'post',
        data: {
          NAME: addform.NAME,
          PARENT_NO: addform.CLIENT_NO,
          CLIENT_NO: addform.PLOT_NO,
          TYPE: addform.TYPE,
          LONGITUDE: addform.LONGITUDE,
          LATITUDE: addform.LATITUDE
        }
      }).then(res => {
        console.log(res.data)
        if (res.data.IsSucess) {
          this.$message.success('新增成功')
          this.getplacelist()
          this.adddialog = false
        }
      })
    },
    saveEdit () {
      let studenteList = this.editform;
      console.log({
        ID: studenteList.ID,
        NAME: studenteList.NAME,
        PARENT_NO: studenteList.CLIENT_NO,
        CLIENT_NO: studenteList.PLOT_NAME,
        TYPE: studenteList.TYPE,
        LONGITUDE: studenteList.LONGITUDE,
        LATITUDE: studenteList.LATITUDE,
        // TELEPHONE: studenteList.TELEPHONE
      });
      this.$axios({
        url: this.$url + 'UpdatePlacePointApi',
        method: 'post',
        data: {
          ID: studenteList.ID,
          NAME: studenteList.NAME,
          PARENT_NO: studenteList.CLIENT_NO,
          CLIENT_NO: studenteList.PLOT_NAME,
          TYPE: studenteList.TYPE,
          LONGITUDE: studenteList.LONGITUDE,
          LATITUDE: studenteList.LATITUDE,
          // TELEPHONE: studenteList.TELEPHONE
        }
      }).then(item => {
        if (item.data.IsSucess) {
          this.$message.success('编辑成功')
          this.editdialog = false
          this.getplacelist()
        }
      })
      this.editVisible = false;
    },
    // editlistdata(editform){
    //   // let studenteList = this.editform;
    //   console.log(editform)
    //   // if(studenteList.TYPE = '小区'){
    //   //   studenteList.TYPE = 1
    //   // }else if(studenteList.TYPE = '大中型餐饮单位'){
    //   //   studenteList.TYPE = 3
    //   // }
    //   let data = {
    //       ID: editform.ID,
    //       NAME: editform.NAME,
    //       PARENT_NO: editform.CLIENT_NAME,
    //       CLIENT_NO: editform.PLOT_NAME,
    //       TYPE: editform.TYPE,
    //       LONGITUDE: editform.LONGITUDE,
    //       LATITUDE: editform.LATITUDE
    //   }
    //   console.log(data)
    //   // console.log({
    //   //     ID: studenteList.ID,
    //   //     NAME: studenteList.NAME,
    //   //     PARENT_NO: studenteList.CLIENT_NO,
    //   //     CLIENT_NO: studenteList.PLOT_NO,
    //   //     TYPE: studenteList.TYPE,
    //   //     LONGITUDE: studenteList.LONGITUDE,
    //   //     LATITUDE: studenteList.LATITUDE
    //   //   })
    //   this.$axios({
    //     // this.$url + 'UpdatePlacePointApi'
    //     url:this.$url + 'UpdatePlacePointApi',
    //     method: 'post',
    //     data:data
    //   }).then(res=>{
    //     if(res.data.IsSucess){
    //       this.$message.success('编辑成功')
    //       this.getplacelist();
    //       this.editdialog = false
    //     }
    //   })
    // },
    handleEdit (index, row) {
      console.log(row)
      this.editdialog = true
      this.editform = Object.assign({}, row)
    },
    // 删除
    handleDelete (index, row) {
      // console.log(row)

      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$axios({
            url: this.$url + 'DeletePlacePointApi',
            method: 'get',
            params: {
              ID: row.ID
            }
          }).then(res => {
            this.$message.success('删除成功')
            this.getplacelist()
          })

        })
        .catch(() => { })
    },
    // 模糊查询
    mohu () {
      console.log(this.carWorktype)
      this.carList = this.originalData
      if (this.lajiname) {
        this.carList = this.carList.filter(item => item.NAME.includes(this.lajiname))
      }
      if (this.carWorktype) {
        this.carList = this.carList.filter(item => item.TYPE === this.carWorktype)
      }
    },
    handlePageChange (currentPage) {
      this.currentPage = currentPage
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size
      console.log(this.pageSize)
    }
  }
}
</script>

<style>
.content {
  overflow-y: scroll;
}
.el-form-item__label {
  height: 32px;
  line-height: 32px;
}
.el-input__inner {
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
}
.handle-input {
  width: 100%;
  max-width: 188px;
}
/* 弹出框 */
.el-dialog {
  background: #ccd8e7;
  padding: 0px 10px;
}
.el-dialog__title {
  color: #15428b;
  font-size: 16px;
  font-weight: 600;
}
.el-dialog__body {
  background: #dfe8f6;
  border: 1px solid #99bbe8;
}
.el-dialog__footer {
  padding: 10px 0px;
}
</style>
